<template>
  <div class="color-setting d-flex al-center">
    <!-- 不要删这个button -->
    <button type="button" @click="handleSelect">
      <el-color-picker :value="color" show-alpha @change="onChange" />
    </button>

    <el-input
      v-show="color"
      :value="colorHex"
      class="ml-16"
      maxlength="7"
      @input="onInput"
      @change="handleLostBlur"
    ></el-input>
  </div>
</template>

<script>
  import { getHexColor } from '@/utils';

  export default {
    model: {
      prop: 'color'
    },

    props: {
      color: { type: String, default: '' },
      rich: { type: Boolean, default: false },
      globalModel: { type: Object, default: () => ({}) },
      currentText: { type: String, default: '' }, // 当前文本框的内容
      isEmpty: { type: Boolean, default: false }, // 判断文本框内容是否为空
      onceEmpty: { type: Boolean, default: false }
    },

    computed: {
      colorHex() {
        return getHexColor(this.color);
      }
    },

    methods: {
      getHexColor,

      // 缓存选中状态
      handleSelect() {
        // 判断是否有选中,并缓存选中状态
        if (window.getSelection().toString()) {
          this.oldRange = window.getSelection()?.getRangeAt(0);
          return;
        }
        // 判断当前文本框是否为清空状态
        if (!this.isEmpty) {
          if (this.currentText === '\n') return;
          if (this.currentText.includes('<span')) return;
          // 强行给文本框的内容套上span
          const newText = `<span style="color:${this.color}">${this.currentText}</span>`;
          this.$emit('replace', newText);
        }
      },

      onChange(value) {
        this.$emit('Changed');
        // 如果清空了颜色，那么就恢复为默认
        if (value === null) {
          this.$emit('globalChange', 'rgba(51,51,51,1)');
          this.$emit('input', value);
          return;
        }

        if (this.rich && this.oldRange && !this.oldRange.collapsed) {
          window.getSelection().removeAllRanges();
          window.getSelection().addRange(this.oldRange);
          document.execCommand('StyleWithCSS', true, true);
          document.execCommand('foreColor', false, value);
          this.$emit('lostBlur');
          this.oldRange = null;
          window.getSelection().removeAllRanges();
          this.$emit('input', value);
        } else {
          this.$emit('globalChange', value);
          this.$emit('input', value);
        }
      },

      onInput(value) {
        this.$emit('input', value);
      },

      // 输入框失去焦点改变全局颜色
      handleLostBlur() {
        this.$emit('globalChange', this.color);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .color-setting ::v-deep {
    .el-input {
      width: 80px !important;

      .el-input__inner {
        border-color: map-get($bgColors, 'lightgrey');
        padding: 5px;
        text-align: center;
        background-color: map-get($bgColors, 'white');

        &:focus {
          border-color: map-get($bdColors, 'theme');
        }
      }
    }

    button[type='button'] {
      border: 0 !important;
      padding: 0 !important;
      font-size: 0;
    }
  }
</style>
